<template>
  <div class="loginpage">
    <div class="imgbox">
      <img src="@/assets/images/logo.png" />
    </div>
    <div class="loginbox">
      <!--验证码登录-->
      <div v-if="loginway === 0">
        <van-form @submit="onSubmit" validate-first style="margin: 0 auto">
          <van-field
            class="rounded-input"
            v-model="phonenumber"
            name="手机号"
            placeholder="请输入手机号"
            label="手机号"
            :rules="[
              { required: true, message: '请输入手机号' },
              {
                pattern: /^1[3456789]\d{9}$/,
                message: '请输入正确的手机号',
              },
            ]"
          />
          <van-field
            v-model="captcha"
            class="rounded-input"
            center
            clearable
            placeholder="请输入验证码"
            label="验证码"
          >
            <template #button>
              <van-button
                v-if="codeshow"
                round
                size="small"
                type="primary"
                native-type="submit"
              >
                发送验证码
              </van-button>
              <van-button
                v-if="!codeshow"
                round
                size="small"
                type="primary"
                readonly
              >
                {{ codetime }}秒后重新获取
              </van-button>
            </template>
          </van-field>
        </van-form>
      </div>
      <!--密码登录-->
      <div v-if="loginway === 1">
        <van-form @submit="onSubmit" validate-first>
          <van-field
            v-model="phonenumber"
            class="rounded-input"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请输入手机号' },
              {
                pattern: /^1[3456789]\d{9}$/,
                message: '请输入正确的手机号',
              },
            ]"
          />
          <van-field
            v-model="password"
            class="rounded-input"
            center
            label="密码"
            clearable
            placeholder="请输入密码"
            type="password"
          >
          </van-field>
        </van-form>
      </div>

      <div style="width: 100vw; margin: 0 auto">
        <van-button round block type="primary" @click="loginbtn" class="login">
          登录
        </van-button>
      </div>
      <div class="login_way_select">
        <a
          v-if="loginway === 1"
          :class="{ selected_way: !loginway }"
          @click="loginway = 0"
          >验证码登录</a
        >
        <a
          v-if="loginway === 0"
          :class="{ selected_way: loginway }"
          @click="loginway = 1"
          >密码登录</a
        >
        <a
          v-if="loginway === 1"
          class="forgot_password"
          @click="goToForgetPassword"
          >忘记密码</a
        >
      </div>
    </div>
    <div class="bottom">
      <div v-html="otherLoginMethods" class="others"></div>
      <img
        src=""
        alt=""
      />
      <div class="others">
        <van-checkbox v-model="isAgree">
          我已经阅读并同意
          <span style="color: #1989fa" @click="gotolink">《用户协议》</span>
          与
          <span style="color: #1989fa" @click="gotolink">《隐私政策》</span>
        </van-checkbox>
      </div>
    </div>
  </div>
</template>

<script>
import { login, passwordlogin, sendcode } from "@/http/request.js";
import { useStore } from "@/store/index.js";
import { showToast } from "vant";
export default {
  data() {
    return {
      loginway: 0, // 0为验证码登录，1为密码登录
      phonenumber: "",
      captcha: "",
      codeshow: true,
      show: false,
      codetime: 60,
      msg: "",
      password: "",
      isAgree: false,
      otherLoginMethods: '<div class="others">—&nbsp;其它登录方式&nbsp;—</div>',
    };
  },
  methods: {
    loginbtn() {
      if (this.isAgree) {
        if (this.loginway === 0) {
          this.loginbycode();
        } else {
          this.loginbypassword();
        }
      } else {
        showToast("未同意《用户协议》与《隐私协议》");
      }
    },
    loginbycode() {
      login({ phone: this.phonenumber, code: this.captcha }).then(
        async (res) => {
          if (res.code === 0) {
            const store = useStore();
            if (res.data.gender == 1) {
              res.data.gender = "男";
            } else if (res.data.gender == 0) {
              res.data.gender = "女";
            } else {
              res.data.gender = "保密";
            }
            await store.setUserinfo(res.data);
            this.codeshow = true;
            this.$nextTick(() => {
              this.$router.push("/homepage");
            });
            showToast(res.msg);
          } else {
            showToast(res.msg);
          }
        }
      );
    },
    loginbypassword() {
      passwordlogin({ phone: this.phonenumber, password: this.password }).then(
        (res) => {
          if (res.code === 0) {
            const store = useStore();
            if (res.data.gender == 1) {
              res.data.gender = "男";
            } else if (res.data.gender == 0) {
              res.data.gender = "女";
            } else {
              res.data.gender = "保密";
            }
            store.setUserinfo(res.data);
            setTimeout(() => {
              this.$router.push("/homepage");
            }, 1000);
            showToast(res.msg);
          } else {
            showToast(res.msg);
          }
        }
      );
    },
    onSubmit() {
      sendcode({ phone: this.phonenumber }).then((res) => {
        this.codeshow = false;
        let timer = setInterval(() => {
          this.codetime--;
          if (this.codetime <= 0) {
            clearInterval(timer);
            this.codeshow = true; // 显示发送验证码按钮
            this.codetime = 60; // 重置倒计时时间
          }
        }, 1000);
      });
    },
    goToForgetPassword() {
      this.$router.push("/forgetPassword");
    },
    gotolink() {
      this.$router.push("/useragreement");
    },
  },
};
</script>

<style scoped>
.loginpage {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, white, #99c6fa);
}

.imgbox {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: auto;
  overflow: hidden;
}
.imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.login_way_select {
  width: 80%;
  display: flex;
  justify-content: space-between;
  margin: 10px auto;
  font-size: 15px;
}

.forgot_password {
  cursor: pointer;
}

.login {
  width: 80%;
  margin: 20px auto;
}

.selected_way {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.rounded-input {
  width: 80%;
  border-radius: 25px;
  margin: 15px auto;
}

.loginbox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
}

.bottom {
  position: fixed;
  bottom: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 13px;
}

.bottom img {
  position: relative;
  bottom: unset;
  left: unset;
  transform: unset;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 10px;
}
</style>